<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理平台</title>
    <link rel="stylesheet" href="/static/css/element-ui/element-ui.css">
    <link rel="stylesheet" href="/static/css/public.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/public.js"></script>
</head>
<body>
<div v-cloak id="app" class="mt-15">
    <%--搜索和添加--%>
    <el-row type="flex" :gutter="20" justify="space-between">
        <el-col :span="10" :xs="10">
            <el-input placeholder="昵称/电话号码/用户名" size="medium" v-model="search.sContent">
                <template slot="prepend">昵称/电话号码/用户名</template>
            </el-input>
        </el-col>
        <el-col :span="4" :xs="4" class="text-right">
            <el-tooltip content="搜索用户" placement="right" effect="light">
                <el-button size="medium" @click="" clearable
                           type="primary" icon="el-icon-search"
                           circle></el-button>
            </el-tooltip>
            <el-tooltip content="添加用户" placement="bottom" effect="light">
                <el-button size="medium" @click="dialog.show = true;dialog.title='添加用户'"
                           type="primary" icon="el-icon-plus"
                           circle></el-button>
            </el-tooltip>

            <el-tooltip content="下载用户模板" placement="bottom" effect="light">
                <el-button size="medium" @click="downloadUserTemplate" icon="el-icon-download" type="primary"
                           circle></el-button>
            </el-tooltip>
            <el-tooltip content="导入用户" placement="bottom" effect="light">
                <el-button size="medium" @click="" icon="el-icon-upload2" type="primary"
                           circle></el-button>
            </el-tooltip>
        </el-col>
    </el-row>

    <%--表格部分--%>
    <el-table size="small" class="mt-10"
              :data="paging.tableData"
              border
              style="width: 100%">
        <el-table-column
                fixed
                prop="nickname"
                label="昵称"
                width="150">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="120">
            <template slot-scope="scope">
                <span v-if="scope.row.sex == '1'">男</span>
                <span v-if="scope.row.sex == '2'">女</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="phoneNum"
                label="手机号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="地市"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-tooltip content="修改" placement="top" effect="light">
                    <el-button @click="" type="primary" size="mini"
                               icon="el-icon-edit" circle></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top" effect="light">
                    <el-button @click="" type="danger" size="mini"
                               icon="el-icon-delete" circle></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <%--分页部分--%>
    <div class="text-right">
        <el-pagination :hide-on-single-page="true"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="paging.currentPage"
                       :page-sizes="[10,20]"
                       :page-size="paging.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="paging.total">
        </el-pagination>
    </div>

    <%--对话框部分--%>
    <el-dialog :visible.sync="dialog.show"
               :close-on-click-modal="false"
               @close="handleDialogClose"
               width="40%"
               top="10vh"
               :title="dialog.title">
        <el-form ref="addForm" label-width="80px">
            <el-form-item label="昵称">
                <el-input size="medium" v-model="currentObj.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input size="medium" v-model="currentObj.username"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input size="medium" v-model="currentObj.phoneNum"></el-input>
            </el-form-item>
            <el-form-item label="省份">
                <el-input size="medium" v-model.number="currentObj.province"></el-input>
            </el-form-item>
            <el-form-item label="地市">
                <el-input size="medium" v-model.number="currentObj.city"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialog.show = false">取 消</el-button>
            <el-button size="small" type="primary" :loading="dialog.loading"
                       @click="saveOrUpdate">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script src="/static/app/admin/admin_user_index.js"></script>
</body>
</html>
